<template>
    <el-card class="!border-none" shadow="never">
        <div class="mb-4 lg">基本信息</div>
        
        <div class="mt-4">
            <el-table :data="[formData]" size="large">
                <el-table-column prop="redis_version" label="Redis版本" min-width="100"/>
                <el-table-column prop="redis_mode" label="运行模式" min-width="100">
                    <template #default="{row}">
                        
                        <el-tag v-if="row.redis_mode==='standalone'">
                            单机
                        </el-tag>
                        <el-tag v-if="row.redis_mode!=='standalone'">
                            集群
                        </el-tag>
                    </template>
                
                </el-table-column>
                <el-table-column prop="tcp_port" label="端口" min-width="100"/>
                
                
                <el-table-column prop="uptime_in_days" label="运行时间" min-width="100"/>
                
                
                <el-table-column prop="aof_enabled" label="AOF" min-width="100">
                    <template #default="{row}">
                        <div v-if="row.aof_enabled==='0'">开启</div>
                        <div v-if="row.aof_enabled==='1'">关闭</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
    
    
    <el-card class="!border-none" shadow="never">
        <div class="mb-4 lg">存储信息</div>
        
        <div class="mt-4">
            <el-table :data="redisData.arr" size="large">
                <el-table-column prop="key" label="key" min-width="100"/>
                <el-table-column prop="value" label="value" min-width="500" :show-overflow-tooltip="true"/>
                
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <div class="flex">
                            <el-button
                                type="danger"
                                link
                                @click="handleDelete()"
                            >
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</template>

<script lang='ts' setup>


import {delRedisCacheDatabase, systemCache, systemCacheDatabase} from "@/api/setting/system";
import feedback from "@/utils/feedback";


/**
 * 数据
 */
const formData = reactive({
    // 版本
    redis_version: '',
    // redis_mode == 'standalone' ? '单机' : '集群'
    redis_mode: '',
    // 端口
    tcp_port: '',
    // aof_enabled == 0 ? '开启' : '关闭'
    aof_enabled: '',
    // 运行时间
    uptime_in_days: ''
    
});

let redisData = reactive({
    arr: []
});


/**
 * 重新加载路由权限数据
 *
 */
async function handleDelete() {
    await feedback.confirm("是否确定删除？")
    await delRedisCacheDatabase()
    
    systemCacheDatabase().then(response => {
        if (!!response) {
            redisData.arr = response
        } else {
            redisData.arr = []
        }
    });
}


onMounted(() => {
    systemCache().then(response => {
        for (let formDataKey in formData) {
            if (!!response[formDataKey]) {
                //@ts-ignore
                formData[formDataKey] = response[formDataKey]
            }
            
        }
    })
})

onMounted(() => {
    systemCacheDatabase().then(response => {
        if (!!response) {
            redisData.arr = response
        }
    });
})

</script>

